import styled from "styled-components";

export const LoginWrapper = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.65);
  .center {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
`

export const LoginContent = styled.div`
  width: 680px;
  height: 450px;
  background-color: #fff;
  border-radius: 12px;
  .heaer {
    display: flex;
    justify-content: space-between;
    color: #fff;
    align-items: center;
    padding: 0 20px;
    height: 50px;
    background: #2d2d2d;
  }
  .cancal {
    font-size: 30px;
  }
  .content {
    display: flex;
    margin: 15px 60px;
    color: #2d2d2d;
    img {
      height: 300px;
      width: 180px;
    }
    p {
      color:  #2d2d2d;
    }
    a {
      color: #0c73c2;
    }
    .qrcode {
      width: 200px;
      height: 200px;
    }
    &-right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
`

export const LoginFooter = styled.span`
  color: #222222;
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid #979797;
  border-radius: 20px;
`